<template>
    <div class="box1">
        <template>
            <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </template>



        <div class="block">

            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
        </div>





        <template>
            <el-select v-model="value1" placeholder="选择科室" border-radius="40">
                <el-option v-for="item in arr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </template>


        <div class="div4">
            <div class="box2">
                <i class="el-icon-search"></i>
                <input type="text" name="" id="" class="inp1" v-model="sousuo1">
            </div>
            <div class="div1">
                <el-button type="success" round  @click="seekCx">查询</el-button>
            </div>

            <div class="div2">
                <el-button type="success" round @click="Export">导出</el-button>

                <el-button type="success" round @click="tanKuang">添加</el-button>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            sousuo1:'',
            keshi:'',
            options: [{
                value: '选项1',
                label: '罗永浩'
            }, {
                value: '选项2',
                label: '终南山'
            }, {
                value: '选项3',
                label: '贾医生'
            }, {
                value: '选项4',
                label: '陆勇'
            }, {
                value: '选项5',
                label: '秦奋'
            }],
            value: '',
            arr: [{
                value: '选项1',
                label: '肛肠科'
            }, {
                value: '选项2',
                label: '儿科'
            }, {
                value: '选项3',
                label: '妇产科'
            }, {
                value: '选项4',
                label: '耳鼻喉科'
            }, {
                value: '选项5',
                label: '眼科'
            }],
            value1: '',


            // 日期
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: '',
            value2: ''



        }
    },
    methods: {
        seekCx(){
            this.$emit('sousuochuanCan',this.sousuo1)
        },

        tanKuang(){
            this.$emit('tankuan1')
        },

        Export(){
            this.$emit('Exportbiaoge')
        }
    },



}



</script>

<style>
.ss {
    width: 400px;
}



.box1 {
    display: flex;

}


</style>
<style lang="less" scoped>
.el-input__inner {
    width: 100px;
    height: 40px;
    border-radius: 40px;
    margin-left: 15px;
}
/deep/.el-input__inner {
 border-radius: 40px; 
}
/* 搜索 */
.inp1 {
    border: none;
    width: 150px;
    height: 20px;
    outline: none
}

.box2 {
    border: 1px solid silver;
    border-radius: 40px;
    width: 240px;
    height: 29px;
    margin-left: 20px;
    /* flex: right; */

    line-height: 29px;
    background: #fff
}

.el-icon-search {
    margin-left: 15px;
    font-weight: 1000
}


/* 查询按钮 */
.el-button {
    background: #435ebe;
    width: 80px;
}


.div1 {
    margin-left: 18px;
}

.div2 {
    display: flex;
    margin-left: 74px;
}

.div4{
    display: flex;
}


.el-button{
    width: 80px;
    height: 32px;
}

.block{
    width: 400px;
    height: 33px;
}

.el-date-editor{
    width: 521px;
    height: 33px;
}


</style>